.playgroundContainer {
  margin-bottom: var(--ifm-leading);
  border-radius: var(--ifm-global-radius);
  box-shadow: var(--ifm-global-shadow-lw);
  overflow: visible;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  background-color: var(--ifm-background-color);
}
.playgroundContainer.standaloneEditor {
  --ifm-code-font-size: 14.4px;
}
.playgroundContainer.row.standaloneEditor > :last-child {
  overflow: visible;
}
.playgroundContainer:not(.row).standaloneEditor > :last-child {
  overflow: visible;
}
.playgroundContainer .playgroundHeader.tabControls:first-of-type {
  border-top-left-radius: var(--ifm-global-radius);
  overflow: hidden;
}
.playgroundContainer.row > :last-child {
  overflow: hidden;
  border-top-right-radius: var(--ifm-global-radius);
  border-bottom-right-radius: var(--ifm-global-radius);
}
.playgroundContainer:not(.row) > :last-child {
  overflow: hidden;
  border-bottom-left-radius: var(--ifm-global-radius);
  border-bottom-right-radius: var(--ifm-global-radius);
}


.playgroundContainer.row .hidden {
  display: none;
}

.playgroundContainer > div {
  flex: 1 1 auto;
}
.playgroundContainer > div:first-child {
  flex: 0 0 65%;
}
.playgroundContainer.endpointPlayground > div:first-child {
  flex: 0 1 50%;
}
.row.playgroundContainer > div:first-child {
  background-color: var(--monoco-code-background);
  border-bottom-left-radius: var(--ifm-global-radius);
  border-top-left-radius: calc(var(--ifm-global-radius) * 2);
}

.playgroundHeader {
  letter-spacing: 0.08rem;
  padding: 0.75rem;
  text-transform: uppercase;
  font-weight: bold;
  background: var(--ifm-color-emphasis-200);
  color: var(--ifm-color-content);
  font-size: var(--ifm-code-font-size);
}
.playgroundHeader.small {
  text-transform: none;
  font-size: 80%;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
}
.playgroundHeader.clickable {
  cursor: pointer;
}
.playgroundHeader.clickable:hover {
  background-color: var(--ifm-color-emphasis-500);
}
.playgroundHeader.noupper {
  text-transform: none;
}
.playgroundHeader.lastChild {
  border-bottom-left-radius: var(--ifm-global-radius);
  border-bottom-right-radius: var(--ifm-global-radius);
}

.codeHeader {
  color: rgb(191, 199, 213);
  border-bottom: 1px solid var(--ifm-color-emphasis-300);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  font-size: var(--ifm-code-font-size);
  font-weight: 500;
  padding: 0.75rem var(--ifm-pre-padding);
}

body {
  --ifm-color-playground-tab-selected: var(--ifm-color-emphasis-300);
}

div.playgroundTextEdit > .playgroundHeader {
  background: var(--ifm-color-emphasis-600);
  color: var(--ifm-color-content-inverse);
}
.playgroundContainer:not(.row)
  > div.playgroundTextEdit
  > .playgroundHeader:first-child {
  border-top-right-radius: var(--ifm-global-radius);
  border-top-left-radius: var(--ifm-global-radius);
}
div > .playgroundHeader.subtabs {
  color: var(--ifm-color-content);
  background: var(--ifm-color-playground-tab-selected);
}

.playgroundEditor {
  /*rtl:ignore*/
  direction: ltr;
  /* height: 100%; */
  padding-top: 8px;
}
.playgroundContainer.standaloneEditor .playgroundEditor {
  padding-top: 12.8px;
  padding-left: 2.8px;
}
.playgroundEditor :global(.prism-code) {
  --ifm-pre-background: var(--monoco-code-background);
  background: transparent;
  border-radius: 0;
  padding-top: 0 !important;
}
.playgroundEditor,
.playgroundEditor :global(.prism-code) {
  font: 13px / 19px var(--ifm-font-family-monospace) !important;
}
.playgroundContainer:not(.row) {
  background-color: var(--monoco-code-background);
}
.closed {
  display: none;
}

.arrow {
  transition: all 200ms ease 0s;
  transform-origin: 45% 50% 0px;
  position: relative;
  display: inline-block;
  font-size: 12px;
  margin-right: 1em;
}
.arrow.vertical {
  float: right;
  margin-right: 0;
}
.arrow.right {
  transform: rotateZ(0deg);
}
.arrow.left {
  transform: rotateZ(180deg);
}
.arrow.up {
  transform: rotateZ(270deg);
}
.arrow.down {
  transform: rotateZ(90deg);
}

:global(.col) .playgroundPreview {
  padding: 1rem;
  background-color: var(--ifm-pre-background);
  flex: 1 4 30%;
  overflow: auto;
}
:global(.col) .playgroundError {
  overflow: visible;
  padding: 0;
  color: var(--ifm-color-danger-contrast-foreground);
  white-space: pre-wrap;
}

.previewWrapper {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.playgroundResult {
  display: flex;
  height: 100%;
}

.debugToggle {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--ifm-color-emphasis-200);
  color: var(--ifm-color-content);
  font-size: var(--ifm-code-font-size);
  padding: 0.7em 0.1em 1em 0.1em;
  cursor: pointer;
  flex: 0 0 auto;
}

.debugToggle:hover {
  background-color: var(--ifm-color-emphasis-300);
}

.playgroundContainer.row.hidden,
.hidden {
  display: none;
}

/* tabs */
.playgroundHeader.tabControls {
  display: flex;
  justify-content: space-between;
  padding: 0;
}
.playgroundHeader.tabControls .title {
  padding: 0.75rem;
}

/* live editor v3 */
:global(.prism-code) {
  height: 100%;
}

.tabs {
  display: flex;
  overflow: auto;
}

.tab {
  height: 100%;
  padding: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.tab:hover {
  background-color: var(--ifm-color-emphasis-700);
}

.tab.selected {
  background-color: var(--ifm-color-playground-tab-selected);
  color: var(--ifm-color-content);
}
.subtabs .tab.selected {
  background-color: var(--ifm-color-emphasis-600);
  color: var(--ifm-color-content-inverse);
}
.subtabs .tab.selected:hover {
  background-color: var(--ifm-color-emphasis-600);
}
.subtabs .tab {
  padding: 0.4rem 0.75rem;
}
.small .tab {
  padding: 0.4rem 0.75rem;
}
.subtabs .tab:hover {
  background-color: var(--ifm-color-emphasis-400);
}

:root .playgroundPreview {
  --ifm-heading-margin-bottom: 0.3ex;
  --ifm-heading-font-weight: 500;
  --ifm-heading-line-height: 1.2;
  overflow: auto;
}
/** DEMO STYLES
* Place any styles needed for demos here
*/
.playgroundPreview button {
  margin-bottom: 8px;
  margin-right: 8px;
  padding: 2px 6px;
}
.playgroundPreview form input[type="text"] {
  width: 100%;
}
.playgroundPreview form textarea {
  width: 100%;
}
.playgroundPreview section {
  margin-bottom: 2ex;
}
.playgroundPreview h4 + small {
  display: block;
}
.playgroundPreview :global(.listItem) {
  display: flex;
  gap: 1em;
}
.playgroundPreview :global(.listItem.nogap) {
  gap: 0;
}
.playgroundPreview :global(.listItem) > label {
  flex: 1 1 100%;
  line-height: 1.1;
  margin-bottom: 4px;
}
.playgroundPreview :global(.listItem) > label input[type="text"] {
  width: calc(100% - 21px);
}
.playgroundPreview :global(.listItem.spaced) {
  display: flex;
  gap: 1em;
  margin-bottom: 10px;
}
.playgroundPreview :global(.author) {
  text-align: center;
}
.playgroundPreview :global(.author) small {
  display: block;
  line-height: 1;
}
.playgroundPreview :global(.voteBlock) {
  display: flex;
  float: left;
  gap: 0.5em;
  margin-right: 0.5em;
}
.playgroundPreview :global(.vote) {
  flex: 0 0 32px;
  text-align: center;
}
.playgroundPreview :global(.vote .up):hover {
  color: var(--ifm-color-primary);
  background: url('../../../static/img/up-arrow-outline-hover.svg') no-repeat
    center;
}
.playgroundPreview :global(.vote .up) {
  border: none;
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin-bottom: -8px;
  margin-right: 0;
  background: url('../../../static/img/up-arrow-outline.svg') no-repeat center;
  display: inline-block;
}
.playgroundPreview p {
  line-height: var(--ifm-heading-line-height);
}

.fixtureBlock {
  background-color: var(--prism-background-color);
  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
    var(--ifm-font-family-monospace);
  color: rgb(191, 199, 213);
  padding: 8px;
}
.fixtureItem {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.fixtureHeader {
  color: rgb(195, 232, 141);
  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
    var(--ifm-font-family-monospace);
  flex: 0 1 auto;
}
div.fixtureJson {
  margin-bottom: 0;
  flex: 1 4 auto;
  min-width: 200px;
}
.fixtureJson code {
  padding: 0;
  margin: 0;
  white-space: pre-wrap;
  max-width: 100%;
}

.playgroundEditor :global(.monaco-editor) {
  --monaco-monospace-font: var(--ifm-font-family-monospace);
}

.playgroundEditor :global(.monaco-editor),
.playgroundEditor :global(.monaco-editor-background),
.playgroundEditor :global(.monaco-editor) :global(.margin),
:global(.monaco-editor) :global(.inputarea.ime-input) {
  background-color: var(--monoco-code-background);
}
.playgroundContainer.row .playgroundEditor :global(.monaco-editor),
.playgroundContainer.row .playgroundEditor :global(.monaco-editor-background),
.playgroundContainer.row
  .playgroundEditor
  :global(.monaco-editor)
  :global(.margin),
.playgroundContainer.row :global(.monaco-editor) :global(.inputarea.ime-input) {
  border-bottom-left-radius: var(--ifm-global-radius);
}
.playgroundEditor
  :global(.monaco-editor)
  :global(.view-overlays)
  :global(.current-line) {
  border-color: var(--monoco-code-lineHighlightBorder);
}

/* override bad loading styles for monaco editor */
.playgroundEditor > section > div {
  display: block !important;
}
.playgroundEditor > section > div:not(:first-child) {
  width: 0;
  flex: 0 0 0;
}
.playgroundEditor > section {
  position: auto !important;
}


@media only screen and (min-width: 768px) and (max-width: 996px) {
  .playgroundContainer.row {
    flex-direction: row;
  }
}
@media only screen and (max-width: 768px) {
  .playgroundContainer.row > :last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: var(--ifm-global-radius);
    border-bottom-left-radius: var(--ifm-global-radius);
  }
  .row.playgroundContainer > div:first-child {
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--ifm-global-radius);

  }
  .playgroundContainer .playgroundHeader.tabControls:first-of-type {
    border-top-right-radius: var(--ifm-global-radius);
  }
}
@media only screen and (min-width: 997px) and (max-width: 1268px) {
  .playgroundContainer.row > :last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: var(--ifm-global-radius);
    border-bottom-left-radius: var(--ifm-global-radius);
  }
  .row.playgroundContainer > div:first-child {
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--ifm-global-radius);

  }
  .playgroundContainer .playgroundHeader.tabControls:first-of-type {
    border-top-right-radius: var(--ifm-global-radius);
  }
}
@media only screen and (min-width: 1268px) {
  .playgroundContainer.row {
    flex-direction: row;
  }
}